<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>HTML5 Canvas</title>
</head>

<body>
    <canvas id="draw" width="800" height="800"></canvas>
    <script>
    </script>

    <style>
        html,
        body {
            margin: 0;
        }

        canvas {
            border: 1px solid black;
        }
    </style>
    <script>
        const canvas = document.querySelector('#draw')
        canvas.width = document.documentElement.clientWidth
        canvas.height = document.documentElement.clientHeight
        const ctx = canvas.getContext('2d');
        var image1 = new Image;
        // image.src = './1.jpeg';
        image1.src = './3.jpeg';






        ctx.beginPath();
        ctx.arc(300, 300, 200, 0, Math.PI * 2, true);
        ctx.closePath();
        var image = new Image;
        // image.src = './1.jpeg';
        image.src = './2.jpeg';



        image1.onload = function () {
            // 创建图案
            ctx.drawImage(image1, 20, 20, 1820, 980);


            image.onload = function () {
                // 创建图案
                let ptrn = ctx.createPattern(image, "repeat");
                ctx.fillStyle = ptrn;
                ctx.globalAlpha = 0.6;
                ctx.fill();
            };

        };









    </script>

</body>

</html>